<template>
	<view>
		<!-- 特惠充值，周卡月卡，每日任务 -->
		<view class="echargebox flex jb" style="background-color: #ffffff;">
			<view class="echargelist">
				<view class="echargeview beij1">
					<!-- <view class="echargetitle">特惠充值</view>
					<view class="echargetext">天天有优惠</view> -->
				</view>
			</view>
			<view class="echargelist">
				<view class="echargeview beij2">
					<!-- <view class="echargetitle">周卡月卡</view>
					<view class="echargetext">低至5.5折</view> -->
				</view>
			</view>
			<view @click="taskdata" class="echargelist">
				<view class="echargeview beij3">
					<!-- <view class="echargetitle">每日任务</view>
					<view class="echargetext">每天领金币</view> -->
				</view>
			</view>
		</view>

		<!-- 撑开 -->
		<view style="width: 100%;height: 5rpx;background-color: #ffffff;"></view>

		<!-- 特惠充值 -->
		<view style="padding: 0 16rpx;background-color: #ffffff;">
			<image style="width:100%;" mode="widthFix"
				src="https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/wawa/list1.jpg"></image>
		</view>

		<!-- tab区域 -->
		<scroll-view class="navbar" scroll-x="true" :scroll-into-view="'navbar'+selectClassifyIda"
			scroll-with-animation="true" :scroll-left="sleft">
			<view class="tabListCon flex ac">
				<view @tap="tabListChange(item.id)" class="nav-item"
					:class="selectClassifyId==item.id?'tabListItems':''" :id="'navbar'+item.id"
					v-for="(item,index) in datalia" :key="index">
					<image :class="selectClassifyId==item.id?'nav-item-image-art':'nav-item-image'" mode="widthFix"
						:src="item.image"></image>
					<view :class="selectClassifyId==item.id?'nav-item-text-art':'nav-item-text'">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 数据内容 -->
		<view class="listbox">
			<view v-for="(item,index) in shuadata" class="listview">
				<view class="listdiv">
					<view class="listdiv-image echargeview" :style="{backgroundImage:'url('+item.background+')'}">
						<view class="flex ac" style="padding:20rpx; 0">
							<view class="title-text">{{item.title}}</view>
							<view class="title-neir">{{item.content}}</view>
						</view>
					</view>
					<view v-for="(items,indexs) in item.list" class="lista-box">
						<view class="lista-view flex">
							<view class="lista-image">
								<image :src="items.imageurl"></image>
							</view>
							<view>
								<view class="flex ac" style="margin-left: 20rpx;margin-top: 20rpx;">
									<image style="width: 35rpx;height: 35rpx;margin-right: 10rpx;"
										src="https://duimianimg.loovee.com/style/ukk/act/client/play_way_list/img/ukaka_sy_icon_kongxian-3cf6f64.png">
									</image>
									<view class="lista-text">{{items.text}}</view>
								</view>
								<view class="flex ac" style="margin-top: 30rpx;">
									<view style="flex: 1;margin-left: 19rpx;">
										<text
											style="font-size: 36rpx;color:#ff4e2e;font-weight: bold;margin-right:5rpx;">{{items.mun}}</text>
										<text style="font-size: 26rpx;color:#ff4e2e;">u币</text>
									</view>
									<view class="platform">{{items.machine}}台</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectClassifyId: 0,
				selectClassifyIda: 0,
				datalia: [{
						id: 0,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjvKLMyGRlAz5cBESay5sRAiVT-a.png',
						name: '割纸机'
					},
					{
						id: 1,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FgW8W44P-UkVc6ZJ3yN8wjXxF_r7.png',
						name: '蘑菇机'
					},
					{
						id: 2,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FtcqxZFUqXmAGIDeSNpjpSg52RJB.png',
						name: '大转盘'
					},
					{
						id: 3,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FtHV0H43kEW-AQ6N0aMp2F8VZpnc.png',
						name: '投篮机'
					},
					{
						id: 4,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FuRm_NVPk1yFMHZLvrCeSnFIdODL.png',
						name: '烧烤架'
					},
					{
						id: 5,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FrMI3enQ6ZrSokyYFUKOoYmExIFa.png',
						name: '叠高高'
					},
					{
						id: 6,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FqsdN4rSKebrC2ZNZ3NiUxgTJH2I.png',
						name: '中间洞口'
					},
					{
						id: 7,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FsUM2AZYlCyj4Ns8mJs9FLtmzl84.png',
						name: '九宫格'
					},
					{
						id: 8,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FtJC7T0gnEDj4ZYq404RCiXOnVvf.png',
						name: '台湾爪'
					},
					{
						id: 9,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FmBdWDSNH0uGFVRVLJeD6Amg5s_m.png',
						name: '精品机'
					},
					{
						id: 10,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fq8neqX-CPohRfjyo8qObJWV_VZe.png',
						name: '大爪机'
					},
					{
						id: 11,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FhBuWZVwcCVaEjiN_B9Y_CKIim2D.png',
						name: '榴莲机'
					},
					{
						id: 12,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fv_whO7z8Ozai4mlsJIrHLgsSDaE.png',
						name: '娃多多'
					},
					{
						id: 13,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FlXOuRET7ADceitHMBzcuNOK5pca.png',
						name: '半挡板'
					},
					{
						id: 14,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FsZKWbkx9SMpKS5WS9A-Y45mYGXF.png',
						name: '无挡板'
					},
					{
						id: 15,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FmBdWDSNH0uGFVRVLJeD6Amg5s_m.png',
						name: '迷你精品机'
					},
					{
						id: 16,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FsZKWbkx9SMpKS5WS9A-Y45mYGXF.png',
						name: '零食机'
					},
					{
						id: 17,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fqq_NNKZMmC2NmyPQwASdHUiqYTS.png',
						name: '磁铁吸吸乐'
					},
					{
						id: 18,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FizFc7B64A1avcRgh4ac1vYCD40u.png',
						name: '弹力网'
					},
					{
						id: 19,
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjDURw-gev4ZpICg9LXa7rUem3QD.png',
						name: '球球大作战'
					},
				],
				shuadata: [{
						background: 'https://duimianimg.loovee.com/style/ukk/act/client/play_way_list/img/ukk_wfzq_dgg_bg-c5ed380.png',
						title: '割纸机',
						content: '将纸割断，娃娃就是你的了',
						list: [{
							mun: 5,
							imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FhW8dg767U-C7qAi5mvuRldWZkQ8.jpg?w=800&h=800',
							machine: 1,
							text: '笑脸双面渔夫帽',
						}]
					},
					{
						background: 'https://duimianimg.loovee.com/style/ukk/act/client/play_way_list/img/ukk_wfzq_zjdk_bg-8390ac2.png',
						title: '蘑菇机',
						content: '将蘑菇全部拔出，并使其掉入',
						list: [{
							mun: 30,
							imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/0c6e3b719c4382ce92b597830c0ae593.png?w=800&h=800',
							machine: 2,
							text: '吉吉熊3d立体口罩30片',
						}]
					},
					{
						background: 'https://duimianimg.loovee.com/style/ukk/act/client/play_way_list/img/ukk_wfzq_bdb_bg-a8718cf.png',
						title: '大转盘',
						content: '转出欧气~',
						list: [{
								mun: 20,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/1c6b9ef67636cb39cb7863f225eedaea.png?w=800&h=800',
								machine: 1,
								text: '国潮创意文字鼠标垫20x0.2cm',
							},
							{
								mun: 20,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/69dc71d79351a93e99268af8c50d0bad.jpg?w=800&h=800',
								machine: 1,
								text: '花花萌宠绳挂件',
							}
						]
					},
					{
						background: 'https://duimianimg.loovee.com/style/ukk/act/client/play_way_list/img/ukk_wfzq_bpq_bg-36992f7.png',
						title: '投篮机',
						content: '打篮球“运动运动”吧',
						list: [{
							mun: 20,
							imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/69dc71d79351a93e99268af8c50d0bad.jpg?w=800&h=800',
							machine: 1,
							text: '花花萌宠绳挂件',
						}]
					},
					{
						background: 'https://duimianimg.loovee.com/style/ukk/act/client/play_way_list/img/ukk_wfzq_skj_bg-4c50734.png',
						title: '叠高高',
						content: '将娃娃们叠起来，使其滚落进右侧',
						list: [{
								mun: 25,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/91c21974257472fe6bbcb9d3fd72405e.png?w=800&h=800',
								machine: 3,
								text: '卡通星星兔狐狸单支花束',
							},
							{
								mun: 30,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/bd48349f5e2a8c3ccf182895f8b0b778.jpg?w=800&h=800',
								machine: 2,
								text: '卡通吉吉熊的憨乐生活盲盒摆件',
							},
							{
								mun: 25,
								imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/bb5330038407b037435ceb7f11a4867e.jpg?w=800&h=800',
								machine: 1,
								text: '得宝樱花味迷你印花纸手帕12包',
							}
						]
					},
				]
			}
		},

		onLoad() {
			//没有登录跳转登录
			if (getApp().globalData.token == '') {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
		},

		methods: {
			taskdata(e) {
				uni.navigateTo({
					url: '/pages/taskcenter/taskcenter'
				})
			},

			tabListChange(e) {
				var id = e;
				this.selectClassifyId = id
				var af = id
				this.selectClassifyIda = af - 2
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("funplay.css");
</style>